<template>
  <v-form v-model="valid" ref="myBrandForm">
    <v-text-field
      v-model="brand.name"
      :rules="nameRules"
      :counter="10"
      label="品牌名字"
      required
    ></v-text-field>
    <v-text-field
      v-model="brand.letter"
      :rules="letterRules"
      label="品牌首字母"
      required
    ></v-text-field>

    <v-cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"/>

    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌LOGO：</span>
      </v-flex>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/image"
          :multiple="false"
          :pic-width="250"
          :pic-height="90"
        />
      </v-flex>
    </v-layout>

    <v-layout class="my-4" row>
      <v-spacer/>
      <v-btn @click="clear" color="warning">重置</v-btn>
      <v-btn @click="submit" color="primary">提交</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
    export default {
        name: "my-brand-form",
      props:{
        oldBrand:{
          type:Object
        },
        isEdit:{
          type:Boolean,
          default:false
        }
      },
      data() {
        return {
          valid:false, // 表单校验结果标记
          brand:{
            name:'', // 品牌名称
            letter:'', // 品牌首字母
            image:'',// 品牌logo
            categories:[], // 品牌所属的商品分类数组
          },
          nameRules:[
            v => !!v || "品牌名称不能为空",
            v => v.length > 1 || "品牌名称至少2位"
          ],
          letterRules:[
            v => !!v || "首字母不能为空",
            v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
          ]

        }
      },
      methods:{
        submit(){
          //根据表单的校验结果判断是否有内容，为true可以提交
           if (this.$refs.myBrandForm.validate()) {
            //定义一个参数。解构获取brand的属性
             let {categories,...others}=this.brand;
             //数据库只需要保存id即可，对categorys的值进行处理，只保留id，并
             //转为字符串
             others.cids=categories.map(c=>c.id).join(",");
             //数据提交给后台
            // this.$http.post("/item/brand",this.$qs.stringify(others))
             this.$http({method:this.isEdit?'put':'post',
             url:"/item/brand",
             data:this.$qs.stringify(others)})
               .then(()=>{
                // console.log(others);
               //保存成功后关闭窗口
               this.$emit("close");

               //成功回调
               this.$message.success("保存成功")
             }).catch(()=>{
               //失败回调
               this.$message.error("保存失败")
             })
           }
        },
        clear(){
          //利用$refs关联vue对象重置reset的值
          this.$refs.myBrandForm.reset();
          //手动清空分类
          this.categories=[]
        }

      },watch:{
          oldBrand:{//监控父组件传递过来的oldBrand内容
            deep:true,
            handler(val){
              if(val){
                // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
                this.brand=Object.deepCopy(val);
              }else {
                //brand为空，初始化brand
                this.brand={
                  name:"",
                  letter:"",
                  image:"",
                  categories:[]

                }
              }

            }
          }
      },
    }
</script>

<style scoped>

</style>
